<template>
  <div style="color: #666;font-size: 14px;">
    <!--数据统计-->
    <el-row :gutter="10" style="margin-bottom: 15px">
      <el-col :span="6">
        <el-card shadow="never">
          <div>我的求助</div>
          <el-divider class="el-divider--horizontal"></el-divider>
          <div>
            <p style="padding: 10px 0; font-size: 35px">{{myHelpsNum}}<span style="font-size: 20px;line-height: 1;"> 个</span></p>
          </div>
          <el-row>
            <el-col :span="12">总求助数量</el-col>
            <el-col :span="12" style="text-align: right">{{ helpsNum }}个</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div> 我的避难点</div>
          <el-divider style="margin: 5px 0;" />
          <div>
            <p style="padding: 10px 0; font-size: 35px">{{ myRefugesNum }}<span style="font-size: 20px;line-height: 1;"> 个</span></p>
          </div>
          <el-row>
            <el-col :span="12">总避难点数量</el-col>
            <el-col :span="12" style="text-align: right">{{refugesNum}}个</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div> 我的救援团队</div>
          <el-divider style="margin: 5px 0;" />
          <div>
            <p style="padding: 10px 0; font-size: 35px">2<span style="font-size: 20px;line-height: 1;"> 个</span></p>
          </div>
          <el-row>
            <el-col :span="12">总救援团队数量</el-col>
            <el-col :span="12" style="text-align: right">45个</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div> 公告总数</div>
          <el-divider style="margin: 5px 0;" />
          <div>
            <p style="padding: 10px 0; font-size: 35px">2<span style="font-size: 20px;line-height: 1;"> 个</span></p>
          </div>
          <el-row>
            <el-col :span="12">总公告数量</el-col>
            <el-col :span="12" style="text-align: right">45个</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--    快捷栏-->
    <el-row :gutter="10" style="margin-bottom: 60px">
      <!--      <el-button @click="addHelp">-->
      <el-col :span="3">
        <el-card shadow="hover" style="color: #409EFF">
          <div style=" text-align: center; font-weight: bold">
            <i class="el-icon-user-solid" style="display: block;font-size: 25px" />
            <!--              <p>新求助</p>-->
            <el-button @click="addHelp" style="border: 0 solid #DCDFE6;">新求助</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" style="color: #F56C6C">
          <div style="text-align: center; font-weight: bold">
            <i class="el-icon-money" style="display: block;font-size: 25px" />
            <!--            <p>新避难点</p>-->
            <!--            <span @click="addRefuge">新避难点</span>-->
            <el-button @click="addRefuge" style="border: 0 solid #DCDFE6;">新避难点</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" style="color: #67C23A">
          <div style="text-align: center; font-weight: bold">
            <i class="el-icon-bank-card" style="font-size: 25px" />
            <p>新救援团队</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" style="color: #E6A23C; .el-card.is-hover-shadow:hover">
          <div style="text-align: center; font-weight: bold">
            <i class="el-icon-s-shop" style="font-size: 25px" />
            <!--            <p>改密码</p>-->
            <router-link to="/password" style="display: block;">
              <span style="cursor: pointer;line-height: 1;text-align: center;font-size: 12px;font-weight: 500">改密码</span>
            </router-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover" style="color: #E6A23C; .el-card.is-hover-shadow:hover">
          <div style="text-align: center; font-weight: bold">
            <i class="el-icon-news" style="font-size: 25px" />
            <!--            <p>公告</p>-->
            <router-link to="/announcements" style="display: block;">
              <span style="cursor: pointer;line-height: 1;text-align: center;font-size: 12px;font-weight: 500">公告</span>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="求助信息" :visible.sync="dialogHelpFormVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="地点名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="求助时间">
          <el-date-picker v-model="form.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="紧急度" prop="priority">
          <el-rate v-model="form.priority" :colors="colors"></el-rate>
        </el-form-item>
        <el-form-item label="求助者电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="被困人员">
          <el-input v-model="form.trappedPersons" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="受灾情况描述">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="需要何种救援方式">
          <el-input v-model="form.rescueWay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="求助信息是否核实" prop="isCheck">
          <el-select v-model="checkForm">
            <el-option label="已核实" value="1"></el-option>
            <el-option label="暂未核实" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否和救援人员取得联系" prop="isContact">
          <el-select v-model="contactForm">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否成功救援" prop="isRescue">
          <el-select v-model="rescueForm">
            <el-option label="已成功救援" value="1"></el-option>
            <el-option label="等待救援" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogHelpFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveHelp">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="避难点信息" :visible.sync="dialogRefugeFormVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="避难点地址">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload action="http://localhost:9090/file/upload" ref="img" :on-success="handleImgUploadSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.contacts" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="条件">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-select v-model="sourceForm" placeholder="请选择来源">
            <el-option label="官方" value="1"></el-option>
            <el-option label="民间" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="typeForm" placeholder="请选择类型">
            <el-option label="未满员" value="1"></el-option>
            <el-option label="已满员" value="0"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRefugeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRefuge">确 定</el-button>
      </div>
    </el-dialog>
    <!--    表格-->
    <!--    我的求助-->

    <!--    我的避难点-->

  </div>
</template>

<script>

import jwtDecode from "jwt-decode";
export default {
  name: "Home",
  data() {
    return {
      colors:['#99A9BF', '#F7BA2A', '#EB5E26'],
      checkOptions: [{value: '1', label: '已核实'}, {value: '0', label: '暂未核实'}],
      contactOptions: [{value: '1', label: '是'}, {value: '0', label: '否'}],
      rescueOptions: [{value: '1', label: '已成功救援'}, {value: '0', label: '等待救援'}],
      form: {},
      checkForm: "",
      contactForm: "",
      rescueForm: "",
      dialogHelpFormVisible: false,

      sourceOptions: [{value: '1', label: '官方'}, {value: '0', label: '民间'}],
      typeOptions: [{value: '1', label: '未满员'}, {value: '0', label: '已满员'}],
      sourceForm: "",
      typeForm: "",
      dialogRefugeFormVisible: false,

      refugesNum:0,
      helpsNum:0,
      myHelpsNum:0,
      myRefugesNum:0,
      userId:0,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods:{
    load() {
      // console.log(this.user)
      let code = jwtDecode(this.user.token)
      this.userId = code.aud

      this.request.get("/helps/myHelpsNum",{
        params: {
          userId: this.userId
        }
      }).then(res => {
        if (res.code === '200') {
          this.$message.success("获取成功")
          this.myHelpsNum = res.data
        } else {
          this.$message.error("获取失败")
        }
      })
      this.request.get("/refuges/myRefugesNum",{
        params: {
          userId: this.userId
        }
      }).then(res => {
        if (res.code === '200') {
          this.$message.success("获取成功")
          this.myRefugesNum = res.data
        } else {
          this.$message.error("获取失败")
        }
      })
      this.request.get("/refuges/refugesnum").then(res => {
        if (res.code === '200') {
          this.$message.success("获取成功")
          this.refugesNum = res.data
        } else {
          this.$message.error("获取失败")
        }
      })
      this.request.get("/helps/helpsnum").then(res => {
        if (res.code === '200') {
          this.$message.success("获取成功")
          this.helpsNum = res.data
        } else {
          this.$message.error("获取失败")
        }
      })
    },
    saveHelp() {
      if (this.checkForm == 1 || this.checkForm == 0){
        this.form.isCheck = this.checkForm
      }
      if (this.contactForm == 1 || this.contactForm == 0){
        this.form.isContact = this.contactForm
      }
      if (this.rescueForm == 1 || this.rescueForm == 0){
        this.form.isRescue = this.rescueForm
      }
      let code = jwtDecode(this.user.token)
      this.form.userId = code.aud
      this.request.post("/helps", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogHelpFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    addHelp() {
      this.dialogHelpFormVisible = true
      this.form = {}
      this.$nextTick(() => {
        if(this.$refs.img) {
          this.$refs.img.clearFiles();
        }
        if(this.$refs.file) {
          this.$refs.file.clearFiles();
        }
      })
    },
    saveRefuge() {
      console.log("save_form1:", this.form);
      console.log("save_form_source:", this.form.source);
      console.log("save_form_sourceForm:", this.sourceForm);

      if (this.sourceForm == 1 || this.sourceForm == 0){
        this.form.source = this.sourceForm
      }
      if (this.typeForm == 1 || this.typeForm == 0){
        this.form.type = this.typeForm
      }

      let code = jwtDecode(this.user.token)
      this.form.userId = code.aud
      this.request.post("/refuges", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogRefugeFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    addRefuge() {
      this.dialogRefugeFormVisible = true
      this.form = {}
      this.$nextTick(() => {
        if(this.$refs.img) {
          this.$refs.img.clearFiles();
        }
        if(this.$refs.file) {
          this.$refs.file.clearFiles();
        }
      })
    },
    handleImgUploadSuccess(res) {
      this.form.img = res
    },
    handleFileUploadSuccess(res) {
      this.form.file = res
    }
  }
}
</script>
<style>
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 5px 0;
}
</style>